<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>标注</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <!--引入当前页面样式表-->
    <!-- <link href="./css/style.css" rel="stylesheet" type="text/css" /> -->
    <!--引入MapBox_GL样式表-->
    <link href="./css/MapBox_GL.css" rel="stylesheet" type="text/css" />
    <!--引入MapBox_GL脚本库-->
    <script src="./js/MapGis_MapBox_product.js" type="text/javascript"></script>
    <script>
        // 使用严格模式
        "use strict";
        // 设置地图对象为全局变量
        var map;
        /**显示地图
        */
        function init() {
            map = new mapboxgl.Map({
                container: 'mapCon',
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "img_w": {
                            //来源类型为栅格瓦片
                            "type": "raster",
                            'tiles': [
                                //来源请求地址
                                "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=88735d6d9bbd5930f1b1c8b8df72e762",//parent.getTiandituKey()为天地图密钥
                            ],
                            //栅格瓦片的分辨率
                            'tileSize': 256
                        },
                        "cia_w": {
                            //来源类型为栅格瓦片
                            "type": "raster",
                            'tiles': [
                                //来源请求地址
                                "http://t0.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=88735d6d9bbd5930f1b1c8b8df72e762",//parent.getTiandituKey()为天地图密钥
                            ],
                            //栅格瓦片的分辨率
                            'tileSize': 256
                        }
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                        {
                            //图层id，要保证唯一性
                            "id": "img_w",
                            //图层类型
                            "type": "raster",
                            //图层来源
                            "source": "img_w",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 17
                        },
                        {
                            //图层id，要保证唯一性
                            "id": "cia_w",
                            //图层类型
                            "type": "raster",
                            //图层来源
                            "source": "cia_w",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 17
                        }
                    ],
                    // 对应MapGis的符号库，采取svg实现
                    sprite: "http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite",
                    // 对应MapGis的字体库，采取pbf实现
                    glyphs: "http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf"
                },
                center: [112, 34],
                zoom: 3
            });
            map.on('load', function () {
                // 新增自己的geojson数据为数据源并设置'cluster'选项为true，mapbox-gl会给改数据源添加point_count属性
                map.addSource("earthquakes", {
                    type: "geojson",
                    // 添加点geojson数据
                    data: "./data/earthquakes.geojson",
                    cluster: true,
                    clusterMaxZoom: 14, // 聚类点可缩放的最大层级
                    clusterRadius: 50 // 聚类点时每个群集的半径（默认为50）
                });
                map.addLayer({
                    id: "clusters",
                    type: "circle",
                    source: "earthquakes",
                    filter: ["has", "point_count"],
                    paint: {
                        // 使用步骤表达式（https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step）有三个步骤来实现三种类型的圈：
                        //   * 蓝颜色, 点数小于100时，20px圈
                        //   * 黄颜色, 点数在100到750之间时，30px圈
                        //   * 粉红色, 当点数大于或等于750时，40px圈
                        "circle-color": [
                            "step",
                            ["get", "point_count"],
                            "#51bbd6",
                            100,
                            "#f1f075",
                            750,
                            "#f28cb1"
                        ],
                        "circle-radius": [
                            "step",
                            ["get", "point_count"],
                            20,
                            100,
                            30,
                            750,
                            40
                        ]
                    }
                });
                map.addLayer({
                    id: "cluster-count",
                    type: "symbol",
                    source: "earthquakes",
                    filter: ["has", "point_count"],
                    layout: {
                        // geojson的属性
                        "text-field": "{point_count}",
                        // 字体种类
                        "text-font": ["黑体", "黑体"],
                        // 字体大小
                        "text-size": 12
                    }
                });
                map.addLayer({
                    id: "unclustered-point",
                    type: "circle",
                    source: "earthquakes",
                    filter: ["!has", "point_count"],
                    paint: {
                        "circle-color": "#11b4da",
                        "circle-radius": 4,
                        "circle-stroke-width": 1,
                        "circle-stroke-color": "#fff"
                    }
                });
                console.log('%c sourse: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', map.style.getSource());

            });

        }
    </script>
</head>

<body onload="init();"
    style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="mapCon" style="width: 100%; height: 100%;"></div>
</body>

</html>